<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4week--课堂作业</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
	 <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  -->
	 <link rel="ahortcut icon" href="images/taobao.ico" type="images/x-icon">

<style type="text/css">
	
	/*.panel-body #cai div{
		margin-left: 75px;
	}
*/
	.tab-content{
            margin: 5px;
            text-align: center;/*居中显示*/
        }


</style>
</head>
<body>
<br>

<div class="container">
	<p class="visible-xs">当前屏幕尺寸：xs</p>
	<p class="visible-sm">当前屏幕尺寸：sm</p>
	<p class="visible-md">当前屏幕尺寸：md</p>
	<p class="visible-lg">当前屏幕尺寸：lg</p>
</div>
<div class="container">
	<div class="panel panel-default">
		
		<div class="panel-heading" style="margin-left:1px;">
			<div class="row">
				<div class="col-lg-9 hidden-xs hidden-md hidden-sm"><h3 class="text-muted">根据你的喜好为你推荐</h3></div>
				<div class="col-lg-3 col-md-12 col-xs-12">
						<ul class="nav nav-tabs" id="mytab">
							<li class="active ">
								<a href="#cai" data-toggle="tab">菜品</a>
							</li>
							<li>
								<a href="#yin" data-toggle="tab">饮品</a>
							</li>
							<li>
								<a href="#zhu" data-toggle="tab">主食</a>
							</li>
						</ul>
				</div>
			</div>
		</div>
		
	<div class="panel-body">


		<div class="tab-content" id="myTabContent">

		<!-- 菜品下的div -->
				<div class="row tab-pane fade in active" id="cai">
					<div class="col-lg-2 col-md-3 col-xs-6 col-md-3 col-xs-6" style="border:1px solid red;">
						<img src="images/ (6).jpg" alt="" >
						<p class="col-md-12 text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
					<div class="col-lg-2 col-md-5 col-md-3 col-xs-6">
						<img src="images/ (6).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
					<div class="col-lg-2 col-md-3 col-xs-6">
						<img src="images/ (6).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
					<div class="col-lg-2 col-md-3 col-xs-6">
						<img src="images/ (6).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
					<div class="col-lg-2 col-md-3 col-xs-6">
						<img src="images/ (6).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
					<div class="col-lg-2 col-md-3 col-xs-6 col-xs-6">
						<img src="images/ (6).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
				</div>

<!-- 饮品下的div -->
				<div class="row tab-pane fade" id="yin">
					<div class="col-lg-2 col-md-2 col-xs-6">
						<img src="images/ (5).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
					<div class="col-lg-2 col-md-2 col-xs-6">
						<img src="images/ (5).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
				</div>


<!-- 主菜下的div -->
				<div class="row tab-pane fade" id="zhu">
					<div class="col-lg-2 col-md-2 col-sm-3 col-xs-6">
						<img src="images/ (7).jpg" alt="" >
						<p class="text-center " >菜品</p>
						<p class="text-center ">￥145.00</p>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-3 col-xs-6">
						<img src="images/ (7).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
					<div class="col-lg-2 col-md-2 col-sm-3 col-xs-6">
						<img src="images/ (7).jpg" alt="" >
						<p class="text-center" >菜品</p>
						<p class="text-center">￥145.00</p>
					</div>
					

				</div>

				
		</div>

		</div>


	</div>

</div>










<br><br>
<!-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> -->
 <!-- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->

<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>